TJKPop Ups

Popping up Text with Images

HTML

Popping up text with images is pretty much straight forward - I just replaced the text that was for the links with IMG tags.

<div id="set_of_links">
<a href="javascript:;"><img src="10.gif" /><span>
<strong>https://www.MyVeryFirstSite.com</strong><br /><br />It's a frames-design layout with a whole bunch of tags.<br />There are also a few cool animated gifs and a hit counter.</span></a><br />
<a href="javascript:;"><img src="20.gif" /><span>
<strong>https://www.NumberTwo.com</strong><br /><br />I dropped the frames and I replaced the animated gifs with cool flash banners.I have also 3D buttons with cool rollover effects!</span></a><br />
<a href="javascript:;"><img src="60.gif" /><span>
<strong>https://www.TheThirdOne.com</strong><br /><br />I dropped the flash banners, I'm using JavaScript to do all kind of cool stuff, I have a pop up navigation menu.</span></a><br />
<a href="javascript:;"><img src="70.gif" /><span>
<strong>https://www.TheLastOne.com</strong><br /><br />I dropped JavaScript and a whole bunch of stuff.Actually I removed everything I can live without.<br />I'm thinking the leaner the better...</span></a>
</div><!-- /set_of_links -->

CSS:

Take note Removing the background property for a:hover will disables the pop up effect in MSIE [as a work-around, I set its value to transparent].

div#set_of_links {
	position:relative;
	padding:9px;border:1px dotted #999;
	background-color:#fff;
	margin-bottom:20px
}
div#set_of_links a {
	display:inline;
	padding:0px 9px 0px 9px;
	text-decoration:none;
	color:maroon
}
div#set_of_links a:hover {
	background:transparent
}
div#set_of_links a span {
	display:none
}
div#set_of_links a:hover span {
	display:inline;
	position:absolute;
	top:0;
	left:90px;
	padding:5px 15px 5px 0
}